<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-18 
 -->


<template>
  <div
    class="flex justify-between items-center fixed z-[1000] w-full shadow-md bg-white transition-all duration-500"
    :class="{ hide: store.state.isFullScreen }"
  >
    <div class="mr-10" @click="router.push('/')">
      <img src="@/assets/img/logo_rect.jpg" class="h-8" />
    </div>
    <a-input-search
      placeholder="input search text"
      enter-button="Search"
      v-model:value="data.value"
      size="large"
      class="flex flex-1 h-10 items-center"
      @search="onSearch"
    />
    <a-menu v-model:selectedKeys="data.current" mode="horizontal">
      <a-menu-item key="help">
        <template #icon>
          <question-circle-outlined class="align-middle" />
        </template>
        <span class="align-middle">帮助</span>
      </a-menu-item>
      <a-menu-item key="salesroom" disabled>
        <template #icon>
          <appstore-outlined class="align-middle" />
        </template>
        <span class="align-middle">门店</span>
      </a-menu-item>
      <a-sub-menu key="account">
        <template #icon>
          <github-outlined class="align-middle" />
        </template>
        <template #title>
          <span class="align-middle">账户</span>
        </template>
      </a-sub-menu>
      <a-sub-menu key="buycart">
        <template #icon>
          <shopping-cart-outlined class="align-middle" />
        </template>
        <template #title>
          <span class="align-middle">购物车</span>
        </template>
        <a-menu-item-group title="购物商品">
          <a-menu-item v-for="item, i in store.state.buycarts" :key="item.id">
            <div class="prod-item">
              <div class="left">
                <img :src="item.imgsrc" :alt="item.title" />
              </div>
              <div class="middle">
                <div class="title">{{ item.title }}</div>
                <div class="content">
                  <span class="num">数量：{{ item.num }}</span>
                  <div class="control">
                    <span class="btn" @click.stop="store.commit('addBuycartsNum', i)">+</span>
                    <span class="btn" @click.stop="store.commit('minusBuycartsNum', i)">-</span>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="price">￥{{ item.price * item.num }}</div>
              </div>
            </div>
          </a-menu-item>
          <a-menu-item key="totalPrice">
            <div class="total">
              <span>总价：</span>
              <span class="num">￥{{ store.getters.totalPrice }}</span>
            </div>
          </a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { QuestionCircleOutlined, AppstoreOutlined, GithubOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const data = reactive({
  value: "",
  current: ["totalPrice"]
})
const onSearch = () => { };
</script>

<style lang='scss' scoped>
.hide {
  @apply -translate-y-full;
}
.ant-menu-submenu {
  @apply h-auto;
  .prod-item {
    @apply flex w-[400px] justify-between;
    .left {
      img {
        @apply w-[100px] h-[100px];
      }
    }

    .middle {
      @apply w-[220px] h-[100px] flex flex-col justify-between;
      .title {
        @apply text-base font-black;
      }

      .content {
        @apply flex justify-between;
        .num {
        }

        .control {
          .btn {
            @apply inline-block w-[30px] h-[30px] text-center leading-[30px] border border-solid border-[#ccc] my-[5px] select-none;
          }
        }
      }
    }

    .right {
      @apply font-black text-orange-400 text-base flex justify-center items-center;
      .price {
      }
    }
  }
  .total {
    @apply text-base font-black flex justify-end;
    .num {
      @apply text-orange-300 pr-5;
    }
  }
}
</style>
